
/*设置默认样式*/
body {
	/*大背景*/
	background-color: #F2F2F2;
	font-size: 12px;
	font-family: "Arial","Microsoft Yahei";
	color: #000000;
}
img {
	/*转块去掉图片小间隔*/
	display: block;
	/*图片和父盒子宽度相同*/
	width: 100%;
}


/*header开始*/
.header {
	/*移动端没有版心，宽度一般用百分比布局*/
	/*百分比布局设置最小宽度和最大宽度使用px*/
	width: 100%;
	min-width: 320px;
	max-width: 540px;
	/*高度使用px*/
	height: 45px;
	border-top: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	background-color: #F6F6F6;
	/*固定定位：脱标  参考浏览器窗口*/
	position: fixed;
	/*固定定位水平居中*/
	left: 50%;
	/*拉回自身宽度*/
	transform: translateX(-50%);
	/*padding：上，左是为了子盒子距离父盒子远   右padding是为了挤出固比固模型中的固*/
	padding: 7px 50px 0 8px;
	/*内减盒模型：width height占有*/
	box-sizing: border-box;
	z-index: 10;
}
.header .search {
	/*比：标准流     百分比：父盒子内容宽比值*/
	width: 100%;
	height: 26px;
	border: 1px solid #999999;
	border-radius: 3px;
	/*盒子阴影*/
	box-shadow: 0 3px 3px rgba(0,0,0,.2);
	background-color: #fff;
	box-sizing: border-box;
	/*pl挤出背景图区域，将文字剂远点*/
	padding-left: 24px;
	/*文字属性可以继承*/
	line-height: 24px;
}
.header .search::before {
	content: "";
	width: 13px;
	height: 14px;
	/*绝对定位参考：参考距离最近且有定位的祖先元素，header有固定定位
	 参考定点：边框以内的四个顶点，无视padding
	 */
	position: absolute;
	top: 13px;
	left: 17px;
	/*背景图设置*/
	/*background-position坐标减半*/
	background: url(../img/icon.png) no-repeat -59.5px -279px;
	/*引入背景图缩小一半*/
	background-size: 104px 327.5px;
}
/*固比固模型：固  使用绝对定位*/
.header .login {
	/*a是行内元素不能设置宽高*/
	position: absolute;
	/*绝对：脱标  可以设置宽高*/
	/*子绝父固*/
	right: 0;
	top: 4px;
	width: 50px;
	height: 39px;
	background-color: #fff;
	text-align: center;
	line-height: 15px;
	color: #2EAAE0;
	background-color: #F6F6F6;
}
.header .login::before {
	content: "";
	/*标准流：块级元素可以设置宽高*/
	display: block;
	width: 23px;
	height: 24px;
	/*块级元素水平居中*/
	margin: 0 auto;
	background: url(../img/icon.png) no-repeat -59.5px -194.5px;
	background-size: 104px 327.5px;
}


/*banner开始*/
.banner {
	/*大盒子  最小和最大宽度设置*/
	width: 100%;
	min-width: 320px;
	max-width: 540px;
	/*盒子水平居中*/
	margin: 0 auto;
	/*由于header设置固定定位，脱标压盖住标准流*/
	padding-top: 45px;
	position: relative;
}
.banner .circles {
	/*小圆点盒子压盖图片*/
	position: absolute;
	right: 6px;
	bottom: 6px;
	width: 67px;
	height: 5px;
	overflow: hidden;
}
.banner .circles ol {
	width: 100px;
} 
.banner .circles ol li {
	/*浮动：同级元素并排显示并且设置宽高*/
	float: left;
	width: 5px;
	height: 5px;
	margin-right: 5px;
	background-color: rgba(255,255,255,.5);
	border-radius: 5px;
}
.banner .circles ol .active {
	width: 17px;
	background-color: #fff;
}
.banner .circles ol li:last-child {
	margin-right: 0;
}


/*主导航开始*/
.main-nav {
	/*一般盒子设置通栏*/
	width: 100%;
	/*省略高度，用内容撑开*/
	/*利用paddding挤出间隔*/
	padding: 4px;
	box-sizing: border-box;
	min-width: 320px;
	max-width: 540px;
	margin: 0 auto;
}
.main-nav .row {
	width: 100%;
	height: 90px;
	background-color: #FF697A;
	border-radius: 8px;
	margin-bottom: 4px;
}
.main-nav .row:nth-child(2) {
	background-color: #3D98FF;
}
.main-nav .row:nth-child(3) {
	background-color: #44C522;
}
.main-nav .row:last-child {
	background-color: #FC9720;
}

.main-nav .row ul li {
	float: left;
	/*宽度均分*/
	width: 33.33%;
	height: 45px;
	/*有左边框，上边框*/
	border-left: 1px solid #fff;
	border-top: 1px solid #fff;
	box-sizing: border-box;
}
.main-nav .row ul li:first-child {
	border:none;
	height: 90px;
}
.main-nav .row ul li:nth-child(2),
.main-nav .row ul li:nth-child(3) {
	border-top:none;
}
.main-nav .row ul li:last-child {
	border-right: none;
}
.main-nav .row ul li a {
	display: block;
	/*标准流：父盒子内容高的比值*/
	height: 100%;
	text-align: center;
	line-height: 45px;
	color: #fff;
	/*文字阴影*/
	text-shadow: 0 2px 2px rgba(0,0,0,.2);
	position: relative;
}
.main-nav .row ul li:first-child a::after {
	content: "";
	position: absolute;
	/*绝对定位元素 水平居中C3*/
	left: 50%;
	transform: translateX(-50%);
	bottom: 15px;
	width: 41px;
	height: 34px;
	background: url(../img/icon.png) no-repeat 0 -130px;
	/*背景图压缩*/
	background-size: 104px 327.5px;
}
/*第二行li图标层叠*/
.main-nav .row:nth-child(2) ul li:first-child a::after {
	width: 42.5px;
	height: 25px;
	bottom: 20px;
	background-position: 0 -297px;
}
/*第三行li图标层叠*/
.main-nav .row:nth-child(3) ul li:first-child a::after {
	width: 36px;
	height: 42px;
	background-position: 0px -180px;
	bottom: 11px;
}
/*第四行li图标层叠*/
.main-nav .row:nth-child(4) ul li:first-child a::after {
	background-image: none;
}
/*第四行第一个li上边框边框设置*/
.main-nav .row:nth-child(4) ul li:first-child {
	height: 45px;
}
/*第四行第四个li左边框层叠取消*/
.main-nav .row:nth-child(4) ul li:nth-child(4) {
	border-left: none;
}


/*侧导航开始*/
.sub-nav {
	width: 100%;
	height: 182px;
	padding: 0 4px;
	min-width: 320px;
	max-width: 540px;
	margin: 0 auto;
	box-sizing: border-box;
}
.sub-nav ul {
	/*大盒子不设置白色背景,设置四个圆角*/
	width: 100%;
	height: 100%;
	border-radius: 8px;
	/*将li多余的背景色溢出隐藏*/
	overflow: hidden;
}
.sub-nav ul li {
	/*均分   水平：li+border-right
                      垂直：li 60px    上下间隔使用margin
	*/
	width: 25%;
	height: 60px;
	float: left;
	border-right: 1px solid #F2F2F2;
	margin-bottom: 1px;
	box-sizing: border-box;
	/*白色背景渲染*/
	background-color: #fff;
}
.sub-nav ul li:nth-child(4n) {
	border-right: none;
}
.sub-nav ul li a {
	display: block;
	width: 100%;
	height: 100%;
	/*单行文本垂直方向调整：line-hight*/
	line-height: 90px;
	text-align: center;
	position: relative;
}
.sub-nav ul li a::before {
	/*小图片：伪元素   脱标绝对定位*/
	content: "";
	position: absolute;
	/*绝对定位：水平方向 非C3*/
	left: 50%;
	margin-left: -10px;
	top: 11px;
	width: 20px;
	height: 19px;
	/*引入背景图*/
	background: url(../img/sub.png) no-repeat 0 -80px;
	/*背景压缩*/
	background-size: 20px 315px;
}
.sub-nav ul li:nth-child(5) a::before {
	background-position: 0 -160px;
}


/*特卖汇开始*/
.sale {
	width: 100%;
	height: 263px;
	border-top: 1px solid #DBDBDB;
	border-bottom: 1px solid #DBDBDB;
	background-color: #fff;
	margin: 8px auto;
	min-width: 32px;
	max-width: 540px;
	padding: 15px 8px 0 8px;
	box-sizing: border-box;
}
.sale .title {
	width: 100%;
	height: 14px;
	position: relative;
}
.sale .title {
	width: 100%;
	height: 14px;
	margin-bottom: 15px;
}
.sale .title h3 {
	/*显示图片但是不显示文字：渲染背景图，同时有文字不能让用户看到，利用padding-top挤出盒子高度*/
	/*移动端宽度一般使用百分比布局，但是对于固定宽度还是利用px*/
	width: 56px;
	height: 0px;
	padding-top: 14px;
	background: url(../img/un_home_text.png) no-repeat;
	background-size: 79px 57.5px;
	overflow: hidden;
}
.sale .title .hongbao {
	/*a行内元素，位置定在右侧，绝对定位*/
	position: absolute;
	top: -4px;
	right: 0;
	width: 102px;
	height: 20px;
	/*渐变*/
	background-image: -webkit-linear-gradient(left,#FE6375,#FE7CCD);
	/*圆角：胶囊型 px*/
	border-radius: 20px;
	padding-left: 11px;
	box-sizing: border-box;
	line-height: 20px;
	color: #fff;
}
.sale .title .hongbao::after {
	content: "";
	/*利用边框旋转 设置大于号*/
	position: absolute;
	top: 5px;
	width: 7px;
	height: 7px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	/*正方向旋转45度*/
	transform: rotate(45deg);
}
/*左侧爆款*/
.sale .content {
	width: 100%;
	height: 205px;
}
.sale .content .hot {
	/*均分*/
	float: left;
	width: 50%;
	height: 100%;
	border-right: 2px solid #fff;
	background-color: #F9F9F9;
	box-sizing: border-box;
}
.sale .content .hot .pic {
	/*图片设置高度*/
	width: 100%;
	height: 117px;
	overflow: hidden;
	position: relative;
}
.sale .content .hot .pic span {
	/*利用长方形+三角形*/
	position: absolute;
	/*长方形*/
	width: 38px;
	height: 20px;
	left: 0;
	top: 0;
	background-color: #FD3A51;
	color: #fff;
	line-height: 20px;
	text-align: center;
}
.sale .content .hot .pic span::after {
	content: "";
	/*设置10px宽度的上边框三角*/
	position: absolute;
	width: 0;
	height: 0;
	border: 10px solid #FD3A51;
	/*上边框   上三角形*/
	border-color: #FD3A51 transparent transparent;
	/*上边框宽度边长到20px*/
	border-top-width: 20px;
	right: -10px;
}
.sale .content .hot .txt {
	padding: 8px 6px 0px 8px;
	font-size: 12;
	line-height: 22px;
}
.sale .content .hot .txt .info {
	/*多行文字显示省略号*/
	/*盒子宽高*/
	width: 100%;
	height: 44px;
	/*文字转为box*/
	display: -webkit-box;
	/*垂直*/
	-webkit-box-orient: vertical;
	/*2行*/
	-webkit-line-clamp: 2;
	/*文字溢出显示省略号*/
	text-overflow: ellipsis;
	/*盒子溢出隐藏*/
	overflow: hidden;
}
.sale .content .hot .txt .price {
	height: 23px;
	font-size: 14px;
	line-height: 23px;
	color: #FF495E;
}
.sale .content .hot .txt .price i {
	/*清除i默认样式：文字不倾斜*/
	font-style: normal;
	font-size: 12px;
}
.sale .content .hot .txt .price span {
	/*行内元素不能设置 宽高，但是padding，margin，border都可以设置*/
	padding: 2px 6px;
	color: #fff;
	background-color: #FD3A51;
	border-radius: 10px;
	margin-left: 4px;
}
/*右侧特价*/
.sale .content .tejia {
	float: left;
	width: 50%;
	height: 205px;
	border-left: 2px solid #fff;
	box-sizing: border-box;
	background-color: #F9F9F9;
}
.sale .content .tejia .top {
	height: 88px;
	padding-top: 9px;
	padding-left: 8px;
	line-height: 20px;
	color: #FD3A51;
	box-sizing: border-box;
	position: relative;
}
.sale .content .tejia .top p:last-child {
	color: #444444;
}
.sale .content .tejia .top::after {
	content: "";
	position: absolute;
	width: 53.5px;
	height: 71px;
	background: url(../img/qiandaizi.png) no-repeat;
	background-size: 53.5px 71px;
	right: 4px;
	bottom: 0;
}
.sale .content .tejia .bottom {
	height: 113px;
	border-top: 4px solid #fff;
}
.sale .content .tejia .bottom div {
	float: left;
	width: 50%;
	height: 113px;
	box-sizing: border-box;
	padding-top: 9px;
	line-height: 20px;
	text-align: center;
	color: #444444;
	position: relative;
}
.sale .content .tejia .bottom div.wanle {
	border-left: 4px solid #fff;
}
.sale .content .tejia .bottom div.jingxuan p:first-child {
	font-weight: bold;
	color: #6AABFF;
}
.sale .content .tejia .bottom div.jingxuan p span {
	color: #6AABFF;
}
.sale .content .tejia .bottom div::after {
	content: "";
	position: absolute;
	width: 49.5px;
	height: 35px;
	background: url(../img/feiji.png);
	background-size: 49.5px 35px;
	left: 50%;
	transform: translateX(-50%);
	bottom: 9px;
}
.sale .content .tejia .bottom div.wanle p:first-child {
	color: #96CA72;
	font-weight: bold;
}
.sale .content .tejia .bottom div.wanle p span {
	color: #96CA72;
}
.sale .content .tejia .bottom div.wanle::after {
	width: 48px;
	background-image: url(../img/pic-tmh-03.png);
	background-size: 48px 35px;
}

























